<template>
  <div class="form-preview-fault-library">
    <div class="form-preview-group">
      <label>{{$t('common.form.preview.faultLibrary.concatLabel1')}}</label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon"></p>
      </div>
    </div>
    <div class="form-preview-group">
      <label>{{$t('common.form.preview.faultLibrary.concatLabel2')}}</label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon"></p>
      </div>
    </div>
    <div class="form-preview-group">
      <label>{{$t('common.form.preview.faultLibrary.concatLabel3')}}</label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon"></p>
      </div>
    </div>
    <div v-if="faultReason" class="form-preview-group">
      <label>{{$t('common.form.preview.faultLibrary.concatLabel4')}}</label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon"></p>
      </div>
    </div>
    <div v-if="solution" class="form-preview-group">
      <label>{{$t('common.form.preview.faultLibrary.concatLabel5')}}</label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon"></p>
      </div>
    </div>
    <div v-if="budgetAmount" class="form-preview-group">
      <label>{{$t('common.form.preview.faultLibrary.concatLabel6')}}</label>
      <div class="form-preview-mock">
        <p class="form-preview-control form-preview-withIcon"></p>
      </div>
    </div>
  </div>
</template>

<script>
import { previewProps } from '@src/component/form/components/props';
import translate from '@src/component/form/mixin/translate.js'

export default {
  name: 'form-faultlibrary-preview',
  mixins: [translate],
  props: previewProps,
  computed: {
    faultLibraryOption() {
      return this.field.setting.faultLibraryOption || {} 
    },
    faultReason() {
      return this.faultLibraryOption.faultReason 
    },
    solution() {
      return this.faultLibraryOption.solution 
    },
    budgetAmount() {
      return this.faultLibraryOption.budgetAmount 
    }
  }
}
</script>
<style lang="scss" scoped>
  .form-preview-fault-library{
    display: flex;
    flex-direction: column;
    .form-preview-group{
      border-bottom: 1px solid  #F5F5F5;
    }
  }
</style>

